﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进货订单详情</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .container {
            width: 95%;
            margin: 20px auto;
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ebeef5;
            border-radius: 4px;
        }

        .order-no {
            font-size: 16px;
            font-weight: 600;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .info-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 4px;
        }

        .big_box{
            display: flex;
        }

        .box-txt{

        }

        .info-col {
            flex: 1;
            min-width: 200px;
        }

        .info-item {
            margin-bottom: 8px;
        }

        .full-width {
            flex: 1 0 100%;
        }

        .form-group {
            margin:20px;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .el-tabs {
            margin-top: 15px;
        }

        .status-pending {
            color: #f59e0b;
        }

        .status-audited {
            color: #10b981;
        }

        .status-draft {
            color: #6b7280;
        }

        .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .action-buttons {
        display: flex;
        gap: 8px;
    }
    .info-container {
        width:1000px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 15px;
    }
    .info-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .info-item {
        flex: 1;
        min-width: 200px;
        display: flex;
        align-items: center;
    }
    .label {
        color: #606266;
        margin-right: 5px;
        min-width: 80px;
        display: inline-block;
    }
    .value {
        color: #303133;
    }
    .full-width {
        flex: 1 0 100%;
    }
    .status-pending {
        color: #f59e0b;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <div class="order-header">
                <h4>进货单号: {{formData.purchase_order_no}}</h4>
                <div class="action-buttons">
                    <el-button size="small">编辑</el-button>
                    <el-button size="small">删除</el-button>
                    <el-button size="small">关闭</el-button>
                    <el-button size="small">审核</el-button>
                    <el-button size="small">复制</el-button>
                    <el-button size="small">打印</el-button>
                </div>
            </div>

            <div class="big_box">
                <div class="info-container">
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">制单人：</span>
                            <span class="value">{{formData.create_by}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">所在部门：</span>
                            <span class="value">{{formData.organizationName || '采购部门'}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">制单时间：</span>
                            <span class="value">{{formatDateTime(formData.create_time)}}</span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">进货日期：</span>
                            <span class="value">{{formatDate(formData.purchase_date)}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">供应商：</span>
                            <span class="value">{{formData.supplierName}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">联系人：</span>
                            <span class="value">{{formData.contact_person}}</span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">联系方式：</span>
                            <span class="value">{{formData.contact_information}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">进货部门：</span>
                            <span class="value">{{formData.organizationName || '采购部门'}}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">进货人：</span>
                            <span class="value">{{formData.purchaser}}</span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-item full-width">
                            <span class="label">备注：</span>
                            <span class="value">{{formData.note || '无'}}</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="box-txt">
                        <div class="label">单据状态</div>
                        <div class="value">{{getStatusName(formData.document_status)}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <!-- 多标签页区域 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="其他信息" name="other">
                    <!-- 可根据需求添加其他信息内容 -->
                    <div style="padding: 10px;">暂无其他信息</div>
                </el-tab-pane>
                <el-tab-pane label="进货明细" name="detail">
                    <el-table :data="detailList" style="width: 100%">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index" label="序号" width="60"></el-table-column>
                        <el-table-column prop="product_name" label="货品名称" width="120"></el-table-column>
                        <el-table-column prop="product_code" label="货品编号" width="120"></el-table-column>
                        <el-table-column prop="specification_model" label="规格型号" width="120"></el-table-column>
                        <el-table-column prop="type_of_goods_name" label="货品类型" width="120"></el-table-column>
                        <el-table-column prop="unit_name" label="单位" width="120"></el-table-column>
                        <el-table-column prop="purchase_unit_price" label="进货单价" width="120"></el-table-column>
                        <el-table-column prop="prod_num" label="进货数量" width="120"></el-table-column>
                        <el-table-column prop="stkIn_num" label="已入库数量" width="120"></el-table-column>
                        <el-table-column label="未入库数量" width="120">
                            <template #default="scope">
                                {{ scope.row.prod_num - scope.row.stkIn_num }}
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" width="120">
                            <template #default="scope">
                                {{ (scope.row.purchase_unit_price * scope.row.prod_num).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="note" label="备注" width="180"></el-table-column>
                    </el-table>
                    <div style="margin-top: 10px; text-align: right;">
                        <span>合计数量：{{formData.TotalQuantity}} | 合计金额：{{formData.TotalAmount.toFixed(2)}}</span>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="入库记录" name="stock-in">
                    <div style="padding: 10px;">暂无入库记录</div>
                </el-tab-pane>
                <el-tab-pane label="退货记录" name="return">
                    <div style="padding: 10px;">暂无退货记录</div>
                </el-tab-pane>
                <el-tab-pane label="操作记录" name="operation">
                    <div style="padding: 10px;">暂无操作记录</div>
                </el-tab-pane>
                <el-tab-pane label="审核记录" name="audit">
                    <div style="padding: 10px;">暂无审核记录</div>
                </el-tab-pane>
                <el-tab-pane label="附件" name="attachment">
                    <div class="upload-area">
                        <el-upload action="/api/PurchaseOrder/UploadAttachment" :file-list="fileList" disabled>
                            <template #default>
                                <el-button type="primary">上传附件</el-button>
                            </template>
                        </el-upload>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <!-- 操作按钮 -->
            <div style="margin-top: 20px;">
                <el-button v-on:click="goBack">关闭</el-button>
                <el-button type="primary" v-on:click="handleEdit">编辑</el-button>
            </div>
        </div>
        </div>
        

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script>
        const { createApp, ref, reactive, onMounted, computed } = Vue;
        createApp({
            setup() {
                const activeTab = ref('detail');
                const fileList = ref([]);
                const formData = reactive({
                    purchase_order_no: '',
                    document_status: '',
                    purchase_date: '',
                    supplierName: '',
                    contact_person: '',
                    contact_information: '',
                    organizations_id: '',
                    organizationName: '', // 新增：部门名称
                    purchaser: '',
                    create_by: '',
                    create_time: '',
                    reviewer: '',
                    review_time: '',
                    note: '',
                    TotalQuantity: 0,
                    TotalAmount: 0
                });
                const detailList = ref([]);

                // 格式化日期
                const formatDate = (date) => {
                    return date ? new Date(date).toLocaleDateString() : '';
                };
                // 格式化日期时间
                const formatDateTime = (date) => {
                    return date ? new Date(date).toLocaleString() : '';
                };

                // 单据状态名称映射
                const getStatusName = (status) => {
                    const statusMap = {
                        '0': '草稿',
                        '1': '已审核',
                        '2': '待审核'
                    };
                    return statusMap[status] || status;
                };

                // 单据状态样式映射
                const getStatusClass = (status) => {
                    const classMap = {
                        '0': 'status-draft',
                        '1': 'status-audited',
                        '2': 'status-pending'
                    };
                    return classMap[status] || '';
                };

                // 获取URL参数
                const getUrlParam = (paramName) => {
                    const params = new URLSearchParams(window.location.search);
                    return params.get(paramName);
                };

                // 加载订单详情
                const loadOrderDetail = async () => {
                    const orderNo = getUrlParam('orderNo');
                    if (!orderNo) {
                        ElementPlus.ElMessage.error('未获取到进货单号');
                        return;
                    }
                    try {
                        const response = await axios.get(`/api/PurchaseOrder/GetPurchaseOrderDetail?orderNo=${orderNo}`);
                        if (response.data.success) {
                            Object.assign(formData, response.data.data.main);
                            detailList.value = response.data.data.details;
                        } else {
                            ElementPlus.ElMessage.error(response.data.message);
                        }
                    } catch (error) {
                        console.error('加载订单详情失败：', error);
                        ElementPlus.ElMessage.error('加载详情失败，请重试');
                    }
                };

                const goBack = () => {
                    window.history.back();
                };

                const handleEdit = () => {
                    window.location.href = `/PurchaseOrder/EditPage?orderNo=${formData.purchase_order_no}`;
                };

                onMounted(() => {
                    loadOrderDetail();
                });

                return {
                    activeTab,
                    fileList,
                    formData,
                    detailList,
                    formatDate,
                    formatDateTime,
                    getStatusName,
                    getStatusClass,
                    goBack,
                    handleEdit
                };
            }
        }).use(ElementPlus).mount('.container');
    </script>
</body>
</html>